<template>
  <el-card class="box-card">
    <template #header>
      <span>
        年龄分布
        <icon-help title="年龄分布" />
      </span>
    </template>
    <div ref="chartRef" :style="{ width: width, height: height }"></div>
  </el-card>
</template>
<script lang="ts" setup>
  import { Ref, ref, watch, onMounted } from 'vue'
  import { useECharts } from '@/hooks/web/useECharts'
  import type { EChartsOption } from 'echarts'
  import { useStore } from 'vuex'
  import iconHelp from '../icon-help/index.vue'
  const animationDuration = 300
  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions, getInstance, resize } = useECharts(
    chartRef as Ref<HTMLDivElement>,
    'macarons'
  )

  const props = defineProps({
    data: {
      type: Object,
      default: {},
    },
    width: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      // eslint-disable-next-line no-undef
      type: String as PropType<string>,
      default: '300px',
    },
  })

  const store = useStore()
  watch(
    () => store.getters.ageDistribution,
    (val) => {
      if (val) {
        const { lt6, ge12, ge6Lt12 } = val
        const legendData = ['x<6岁', '6岁≤x<12岁', '12岁≤x']
        const seriesData = [
          { value: lt6, name: 'x<6岁', id: 'x<6岁' },
          { value: ge6Lt12, name: '6岁≤x<12岁', id: '6岁≤x<12岁' },
          { value: ge12, name: '12岁≤x', id: '12岁≤x' },
        ]
        const seriesDataTmp = {
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(255,255,255,0.8)',
            color: 'red',
            axisPointer: {
              type: 'shadow',
            },
            formatter: (params: any) => {
              return (
                params.name +
                '<br/>' +
                params.marker +
                ' ' +
                params.data.name +
                ' 共' +
                params.data.value +
                '人次'
              )
            },
          },
          grid: {
            top: '0',
          },
          legend: {
            bottom: '0',
            data: legendData,
          },
          series: [
            {
              name: '百分比',
              type: 'pie',
              top: -20,
              label: {
                formatter: '{b}' + '{d}' + '%',
              },
              // height: '80%',
              center: ['50%', '50%'],
              radius: ['40%', '70%'],
              data: seriesData,
              animationType: 'scale',
              animationEasing: 'cubicInOut',
              animationDuration,
            },
          ],
        }
        setOptions(seriesDataTmp as EChartsOption)
      }
    },
    { immediate: true }
  )

  watch(
    () => store.getters.sidebar.opened,
    async (val) => {
      console.log('ageDistribution size change')
      // await nextTick()
      setTimeout(() => {
        resize()
      }, 500)
    },
    { immediate: true }
  )
  const emit = defineEmits(['select'])
  onMounted(() => {
    const myChart = getInstance()
    console.log('myChart =' + myChart)
    myChart?.on('click', function (params) {
      const { data, dataIndex } = params as {
        data: { name: string }
        dataIndex: number
      }
      emit('select', { name: data.name })
    })
  })
</script>
<style lang="scss" scoped>
  .box-card {
    // width: 50%;
    margin-bottom: 22px;
  }
</style>
